<template>
	<div>
		<div class="pub-title">后台管理</div>
		<ul class="pub-tab">
			<li class="option-list">
				<a href="article.html" class="option on">电子书</a>
				<!-- <a href="article_classify.html" class="option">分类</a> -->
			</li>
			<li class="tab-block-list">
				<div class="pub-form-line">
					<div class="pub-form-line-left sign">书名</div>
					<div class="pub-form-line-right">
						<input type="text" class="pub-input" v-model="bookInfo.title" />
						<input type="hidden" v-model="bookInfo._id" />
					</div>
				</div>

				<div class="pub-form-line">
					<div class="pub-form-line-left">作者</div>
					<div class="pub-form-line-right">
						<input type="text" class="pub-input" v-model="bookInfo.author" />
					</div>
				</div>

				<div class="pub-form-line">
					<div class="pub-form-line-left">朝代</div>
					<div class="pub-form-line-right">
						<input type="text" class="pub-input" v-model="bookInfo.dynasty" />
					</div> 
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left">图书来源</div>
					<div class="pub-form-line-right">
						<input type="text" class="pub-input" v-model="bookInfo.source" placeholder="默认互联网" />
					</div>
				</div> 
 
				<div class="pub-form-line"> 
					<div class="pub-form-line-left sign">封面图</div>
					<div class="pub-form-line-right">
						<img :src="img" alt="" height="100">
						<input type="file" class="pub-input" @change="upimg"/> <span class="pub-gray">尺寸:200*280</span>
					</div>
				</div> 

				<div class="pub-form-line">
					<div class="pub-form-line-left sign">资料类型</div>
					<div class="pub-form-line-right">
						<select v-model="bookInfo.type" style="width:160px;"> 						
							<option value="1">书籍</option>
							<option value="2">音频</option>
							<option value="3">视频</option>
						</select>
					</div>
				</div>
				<div class="pub-form-line" v-if="bookInfo.type==1">
					<div class="pub-form-line-left sign">书籍格式</div>
					<div class="pub-form-line-right">
						<select v-model="bookInfo.booktype" style="width:160px;">
							<option value="1">txt电子书</option>
							<option value="2">pdf电子书</option>														
						</select>
					</div>
				</div>
				
				<div class="pub-form-line" v-if="bookInfo.type==2 || bookInfo.type==3">
					<div class="pub-form-line-left sign">开放平台</div>
					<div class="pub-form-line-right">
						<select v-model="bookInfo.openPlatform" style="width:160px;"> 						
							<option value="">请选择</option>
							<option value="1">喜马拉雅</option>							
						</select>
					</div>
				</div>
				
				<div class="pub-form-line" v-show="bookInfo.openPlatform==1">
					<div class="pub-form-line-left sign">开放平台参数</div>
					<div class="pub-form-line-right">
						<input type="text" class="pub-input" v-model="bookInfo.openPlatformData" style="width:160px;"/>
						<input type="button" value="获取数据" @click="getOpenPlatformData" class="pub-btn"/>
					</div>
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left sign">所属分类</div>
					<div class="pub-form-line-right">
						<select v-model="bookInfo.classify" style="width:160px;"> 						
							<option value="1">周易</option>
							<option value="2">占卜</option>
							<option value="3">命理</option>
							<option value="4">风水</option>
							<option value="5">三式</option>
							<option value="6">其它</option>							
						</select>
					</div>
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left sign">是否显示</div>
					<div class="pub-form-line-right">
						<label><input type="radio" name="isshow" value="1" v-model="bookInfo.isshow" /> 是</label>
						<label><input type="radio" name="isshow" value="0" v-model="bookInfo.isshow" /> 否</label>
					</div>
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left sign">是否首页显示</div>
					<div class="pub-form-line-right">
						<label><input type="radio" name="isindex" value="1" v-model="bookInfo.isindex" /> 是</label>
						<label><input type="radio" name="isindex" value="0" v-model="bookInfo.isindex" /> 否</label>
					</div>
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left sign">排序</div>
					<div class="pub-form-line-right">
						<input type="text" class="pub-input" v-model="bookInfo.sort" placeholder="1" />
					</div>
				</div>
				<template v-if="bookInfo.type==1">
					<div class="pub-form-line" v-if="bookInfo.booktype!=2">
						<div class="pub-form-line-left sign">上传书籍</div>
						<div class="pub-form-line-right" style="line-height: 1.5;">
							<input type="file" class="pub-input" @change="upbook">
							<input type="hidden" v-model="bookInfo.path"><br/>
							<a :href="host+bookInfo.path">{{bookInfo.path}}</a> 
						</div>
					</div>
					<div class="pub-form-line" v-if="bookInfo.booktype==2"> 
						<div class="pub-form-line-left sign">书籍地址</div>
						<div class="pub-form-line-right" style="line-height: 1.5;">
							<input type="text"  class="pub-input" style="width: 500px;" v-model="bookInfo.path"  placeholder="请输入pdf电子书地址"><br/>
						</div>
					</div>
				</template>
				
				<div class="pub-form-line"  v-if="bookInfo.type>1">
				 	<div class="pub-form-line-left sign">音视频资料</div>
				 	<div class="pub-form-line-right">
				 		<table class="pub-table" style="width:750px;border:solid 1px #ddd;">
							<tr>
								<th width="200">音视频名称</th>
								<th width="400">播放链接</th>
								<th>操作</th>
							</tr>
							<tr v-for="(v,k) in medialists">
								<td><input type="text" class="pub-input" @change="setMedialist" v-model="v.name" style="width: 96%;"/></td>
								<td><input type="text" class="pub-input" @change="setMedialist" v-model="v.value" style="width: 96%;"/></td>
								<td>
									<a href="javascript:" @click="add" class="pub-btn" v-if="k==medialists.length-1">添加</a>
									<a href="javascript:" @click="del(k)" class="pub-btn" v-if="medialists.length>1">删除</a>
								</td>
							</tr>
						</table>
				 	</div>
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left">描述</div>
					<div class="pub-form-line-right">
						<textarea v-model="bookInfo.describe" class="text" style="width:500px;height:100px;"></textarea>
					</div>
				</div>
				
				<div class="pub-form-line">
					<div class="pub-form-line-left"></div>
					<div class="pub-form-line-right">
						<button class="pub-btn pub-btn-bgred pub-btn-big" @click="submit">提交</button>
					</div>
				</div>
				
			</li>
		</ul>
	</div> 
</template> 

<script>
	module.exports = {
		data: function() {
			return {
				host:window.host,
				medialists:[
					{name:'',value:''},
				],
				bookInfo: {
					classify: 1,
					type:1,
					isshow: "1",
					isindex: "0",
					bookimg:"",
					path:"",
					mediaList:[],
					openPlatform:"",
					booktype:1
				},
			} 
		},  
		computed:{
			img(){
				if(this.bookInfo.bookimg){
					if(this.bookInfo.bookimg.indexOf('http')>-1){
						return this.bookInfo.bookimg;
					}else{
						return window.host+this.bookInfo.bookimg;
					}
				}else{
					return "";
				}
			}
		},
		methods: {
			getOpenPlatformData(){
				if(this.bookInfo.openPlatformData){
					if(this.bookInfo.openPlatform==1){
						//this.bookInfo.openPlatformData为专辑id
						//喜马拉雅开放平台
						var xmly=new xmsdk.XMLY();
						var url='https://api.ximalaya.com/';
						xmly.get(url+'albums/browse/',{album_id:this.bookInfo.openPlatformData}).then(res => {
							if (res.code === 0) {
								var list=[];
								for(var i=0;i<res.data.tracks.length;i++){
									list.push({
										name:res.data.tracks[i].track_title,
										value:res.data.tracks[i].download_url
									})
								}
								
								//_this.medialists=list;
								//_this.setMedialist();
								//console.log(res.data.cover_url_middle.split('!')[0]);
								_this.bookInfo.title=res.data.album_title;
								_this.img=_this.bookInfo.bookimg=res.data.cover_url_middle.split('!')[0];
								_this.bookInfo.describe=res.data.album_intro;
							}
						}).catch(error => {
							//console.log(error)
						});
						
					}
				}
			},
			add(){
				this.medialists.push({name:'',value:''});
			},
			del(index){
				this.medialists.splice(index,1);
				this.setMedialist();
			},
			setMedialist(){
				var list=[];
				for(var i=0;i<this.medialists.length;i++){
					if(this.medialists[i].name && this.medialists[i].value){
						list.push(this.medialists[i])
					}
				}
				if(list.length>0){
					this.bookInfo.mediaList=JSON.stringify(list);
				}
			},
			submit() {
				var url = this.bookInfo._id ? 'book/update' : 'book/add';			
				ajax({
					url: url,
					data: this.bookInfo,
					type: 'post',
					success: function(res) {						
						if (res.state == 1) {
							location.href = "book.html";
						} else {
							UI.alert(res.msg);
						}
					} 
				}) 
			},   
			upimg(ev){
				this.$parent.up(ev.target,'img',function(res){
					_this.bookInfo.bookimg=res.file0.path;
				})
			},
			upbook(ev){
				this.$parent.up(ev.target,'book',function(res){
					_this.bookInfo.path=res.file0.path;
				})
			}
		},
		created() {
			_this = this;
			xmsdk.config({
			   app_key: '6120bfbe38ac18c2b4c4ca00b11554f8', 
			   device_id: '0a3751e0-903e-495d-8230-827e41ff7990',
			   get_access_token: null,
			   sig_url: 'http://api.cne5000.top/xmly_token/index', 
			   timeout: 10*1000,
			   debug:false,
			})
			if (query.id) {
				ajax({
					url: "book/get", 
					data: {
						id: query.id
					}, 
					success: function(res) {
						if (res.state == 1) {
							if(!res.data.type)res.data.type=1;
							if(!res.data.openPlatform)res.data.openPlatform='';
							if(!res.data.booktype)res.data.booktype=1;
							_this.bookInfo = res.data;
							if(res.data.mediaList){
								var tmp=JSON.parse(res.data.mediaList);
								if(tmp.length==0){
									tmp.push({name:'',value:''});
								}
								_this.medialists=tmp;
							}
						} else {
							UI.alert(res.msg);
						}
					}
				})
			}
		}
	}
</script>
